﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge，chrome=1">
    <meta name="renderer" content="webkit">
    <title>房屋租赁系统</title>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <link href="https://cdn.bootcdn.net/ajax/libs/animate.css/4.1.1/animate.compat.min.css" rel="stylesheet">
    <link rel="stylesheet" href="/static/css/bootstrap.css"/>
    <link rel="stylesheet" href="/static/css/index3.css"/>
</head>
<body>
<!--头部-->
<div class="header">
    <a href="/house/houselist">
        房屋租赁系统
    </a>

</div>
<!--主体-->
<div class="container animated zoomIn">
    <div id="mapadd"></div>
</div>
</body>
<script src="/static/js/echarts.min.js"></script>
<script>

    $.getJSON('/static/js/370200_full.json', function (usaJson) {
        $.getJSON('/api/getcount',function (data){
            /* 地图 需要哪个省市的地图直接引用js 将下面的name以及mapType修改为对应省市名称*/
            console.log(data)
            var maps = echarts.init(document.getElementById('mapadd'));
            echarts.registerMap('QingDao', usaJson);
            option = {
                title: {
                    text: '青岛市房屋租赁系统',
                    subtext: '18J01 G08 P03',
                    sublink: 'http://www.census.gov/popest/data/datasets.html',
                    left: 'right'
                },
                tooltip: {
                    trigger: 'item',
                    showDelay: 0,
                    transitionDuration: 0.2,
                    formatter: function (params) {
                        var value = (params.value + '').split('.');
                        value = value[0].replace(/(\d{1,3})(?=(?:\d{3})+(?!\d))/g, '$1,');
                        return params.seriesName + '<br/>' + params.name + ': ' + value;
                    }
                },
                visualMap: {
                    left: 'right',
                    min: 0,
                    max: 10,
                    inRange: {
                        color: ['#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#ffffbf', '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026']
                    },
                    text: ['High', 'Low'],           // 文本，默认为数值文本
                    calculable: true
                },
                toolbox: {
                    show: true,
                    //orient: 'vertical',
                    left: 'left',
                    top: 'top',
                    feature: {
                        restore: {},
                        saveAsImage: {}
                    }
                },
                series: [
                    {
                        name: '房屋销量',
                        type: 'map',
                        roam: true,
                        map: 'QingDao',
                        emphasis: {
                            label: {
                                show: true
                            }
                        },
                        data:data.data
                    }
                ]
            };
            maps.setOption(option);
        })

    })
</script>
</html>